<!--
 * Date: 2018年01月02日 09:32:33
 * LastEditors: lvyou
 * LastEditTime: 2019年11月27日 16:06:47
 * FilePath: \youlinweb-master\src\pages\replace\replace.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div>
    <ylheader :leftsvg="true" :title="'闲置'" :rightsvg="true" :addsvg="true" @adds="addreplace" @search="replacesearch"></ylheader>
    <mt-navbar :class="'replace-mtnav'" v-model="selected" fixed style="margin-top: 0.88rem">
      <mt-tab-item @click.native="repthree($event)" id="3">全国</mt-tab-item>
      <mt-tab-item @click.native="repone($event)" id="1">本小区</mt-tab-item>
      <mt-tab-item @click.native="reptwo($event)" id="2">本城市</mt-tab-item>
    </mt-navbar>

    <div class="navbar-sep"></div>
    <div class="navbar-septwo"></div>
    <versioncofig :versionTitle="ruleConfig.replacedRuleTitle" @toVersionDetail="$router.push({name:'activityrule',query:{tag:7}, params:{replacedRuleContent:ruleConfig.replacedRuleContent}})"
      @canclVersion="isRuleShow=!isRuleShow" v-if="isRuleShow"></versioncofig>
    <div class="hot-replace loadmore-container" ref="replaceWrapper">
      <div class="loadmore-ul">
        <mt-tab-container v-model="selected" :style="{'margin-top':isRuleShow?'1.5rem':'1rem'}">
          <div v-if="selected==myid" style="width: 7.5rem">
            <div class="shuoshuo-new" v-if="isreplaceempty">
              <span class="yl-2kong nosvg">
                <span class="path1">
                  <span class="path2">
                    <span class="path3">
                      <span class="path4">
                        <span class="path5">
                          <span class="path6">
                            <span class="path7">
                              <span class="path8">
                                <span class="path9"></span>
                              </span>
                            </span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
              <span class="no-text">啊哦，这里空空的，让人感觉怪怪的，赶紧来填上一笔吧！</span>
            </div>
            <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
              <ul>
                <li style="background-color: white;margin-bottom: 0.2rem" v-for="(item,index) in commentlist" :key="index">
                  <replaceheader :avatar="item.head" :commentindex="index" :statustype="item.replacedResult" :name="item.name" :time="item.timeStamp" :money="item.price"
                    @torepcommentdetail="torepcomdet" :userType="item.userType" :isTalent="item.isTalent" :pendantType="item.pendantType" :pendantPicUrl="item.pendantPicUrl"></replaceheader>
                  <newcommentbodyreplace :repplace="item.place" :commentindex="index" :commenttype="null" :commenttext="item.title" :piclength="item.picture.length" :picarray="item.picture"
                    :description="item.content" :isdisplacetype="2" @replycomment="torepcomdet">
                  </newcommentbodyreplace>
                  <thubm-up :topiccommentnum="item.commentNumber" :thumbupnum="item.likes" :commentindex="index" :isup="item.isgood" @thumbup="isdisplacethumbup" @commentsvgg="torepcomdet"></thubm-up>

                </li>
              </ul>
            </div>
          </div>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>
<script>
import { Navbar, TabItem } from "mint-ui";
import commentbody from "src/components/comment-detail-body.vue";
import newcommentbodyreplace from "src/components/replace/new-comment-detail-body-replace.vue";
import ylheader from "src/components/yl-header.vue";
import replaceheader from "src/components/replace/hot-displace-replaceheader.vue";
import thubmUp from "src/components/thumb-up.vue";
import versioncofig from "src/components/common/versionconfig.vue";
import api from "src/api/index";
import { mapState, mapMutations } from "vuex";
import { Loadmore, Indicator } from "mint-ui";

export default {
  name: "replace",
  data () {
    return {
      selected: "",
      commentlist: [],
      mydata: {},
      myid: "",
      pageone: 1,
      pagetwo: 1,
      pagethree: 1,
      loadmore: false,
      is_r: false,
      scrollMode: "auto",
      hasmore: "",
      isreplaceempty: false,
      isRuleShow: false,//是否显示版规
      ruleConfig: null,//版规内容
    };
  },
  components: {
    Navbar,
    TabItem,
    commentbody,
    ylheader,
    replaceheader,
    Loadmore,
    thubmUp,
    newcommentbodyreplace,
    versioncofig
  },
  computed: {
    ...mapState(["replacestatus", "searchresultselected"])
  },
  watch: {
    selected (val) {
      this.changereplacestatus(val);
    }
  },
  mounted () {
    Indicator.open("加载中...");
    this.selected = this.replacestatus;
    this.init();
  },
  methods: {
    ...mapMutations(["changereplacestatus", "changesearchresultselected"]),
    init () {
      let replaceWrapper = this.$refs.replaceWrapper;
      this.initReplace()
        .then(data => {
          return this.replacedruledetail();
        })
        .then(data => {
          this.$nextTick(() => {
            return this.initScroll(replaceWrapper, this);
          });
        })
        .then(data => {
          this.$nextTick(() => {
            if (!!this.myscroll) this.myscroll.refresh();
          });
          let loadmore = document.getElementsByClassName("loadmore-ul");
          if ("detail2place" == localStorage.turnCount) {
            if (loadmore.length > 0) {
              setTimeout(() => {
                loadmore[0].style.transform = localStorage.turnBackplace;
              }, 0);
            }
            localStorage.turnCount = "";
            Indicator.close();
          }
        });
    },
    initReplace () {
      let p = new Promise((resolve, reject) => {
        if (
          "index2place" == localStorage.turnCount ||
          "" == localStorage.turnCount
        ) {
          Indicator.close();
          this.myid = this.replacestatus;
          if (this.myid == "1") {
            this.mydata = {
              page: this.pageone,
              park: localStorage.getItem("park"),
              showType: 1,
              city: localStorage.getItem("city")
            };
          } else if (this.myid == "2") {
            this.mydata = {
              page: this.pagetwo,
              city: localStorage.getItem("city"),
              showType: 2
            };
          } else if (this.myid == "3") {
            this.mydata = {
              page: this.pagethree,
              showType: 3
            };
          }

          this.mydata.limit = 10;
          this.mydata.order = "desc";

          api.Queryreplace(this.mydata).then(res => {
            if (res.success) {
              this.commentlist = res.data.list;
              this.$util.getListUrl(this.commentlist);
              this.picAutoOrient(0);
              if (res.data.currPage == res.data.totalPage) {
                this.hasmore = false;
              } else {
                this.hasmore = true;
              }
              this.totalPage = res.data.totalPage;
              this.is_r = false;
              if (this.page > 1) {
                setTimeout(() => {
                  if (!!this.myscroll) this.myscroll.refresh();
                }, 0);
              }

              let placeObj = JSON.stringify({
                commentlist: this.commentlist,
                hasmore: this.hasmore,
                totalPage: this.totalPage,
                page: this.page,
                selected: this.selected,
                myid: this.myid,
                pageone: this.pageone,
                pagetwo: this.pagetwo,
                pagethree: this.pagethree
              });
              localStorage.placeStorage = placeObj;

              resolve("获取得到置换数据...");
            } else {
              resolve("未得到数据...");
            }
          });
        } else if ("detail2place" == localStorage.turnCount) {
          Indicator.close();
          let placeObj = JSON.parse(localStorage.placeStorage);
          this.commentlist = placeObj.commentlist;
          this.hasmore = placeObj.hasmore;
          this.totalPage = placeObj.totalPage;
          this.page = placeObj.page;
          this.selected = placeObj.selected;
          this.myid = placeObj.myid;
          this.pageone = placeObj.pageone;
          this.pagetwo = placeObj.pagetwo;
          this.pagethree = placeObj.pagethree;
          resolve(true);
        }
      });
      return p;
    },
    initScroll () {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let replaceWrapper = this.$refs.replaceWrapper;
          this.setScroll(replaceWrapper, this);
        });
        resolve("初始化scroll结束...");
      });
      return p;
    },
    setScroll (replaceWrapper, _this) {
      localStorage.tempPageHeight = document.getElementsByClassName(
        "loadmore-ul"
      )[0].scrollHeight;
      _this.myscroll = new iScroll(replaceWrapper, {
        //上拉时触发
        onScrollMove: function () {
          if (
            this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
            _this.is_r == false
          ) {
            //加载数据
            _this.is_r = true;
            setTimeout(() => {
              if (_this.myid == "1") {
                if (_this.pageone < _this.totalPage) {
                  _this.loadmore = true;
                  _this.pageone += 1;
                  _this.repone();
                }
              } else if (_this.myid == "2") {
                if (_this.pagetwo < _this.totalPage) {
                  _this.loadmore = true;
                  _this.pagetwo += 1;
                  _this.reptwo();
                }
              } else if (_this.myid == "3") {
                if (_this.pagethree < _this.totalPage) {
                  _this.loadmore = true;
                  _this.pagethree += 1;
                  _this.repthree();
                }
              }
            }, 0);
          }
        },
        onScrollEnd: function () {
          // this.swipeInit()
        },
        onScrollStart: function () {
          if (
            localStorage.tempPageHeight !=
            document.getElementsByClassName("loadmore-ul")[0].scrollHeight
          ) {
            this.refresh();
            localStorage.tempPageHeight = document.getElementsByClassName(
              "loadmore-ul"
            )[0].scrollHeight;
          }
        }
      });
      Indicator.close();
    },
    replacesearch () {
      this.changesearchresultselected(0);
      this.$router.push({ path: "/search", query: { type: "3" } });
    },
    repone (event) {
      Indicator.open("加载中...");
      if (!!event) {
        this.is_r = false;
        this.loadmore = false;
        this.pageone = 1;
        if (this.myscroll) this.myscroll.scrollToPage(0, 0, 100);
      }

      this.myid = "1";
      const data = {
        page: this.pageone,
        limit: 10,
        order: "desc",
        park: localStorage.getItem("park"),
        showType: 1,
        city: localStorage.getItem("city")
      };
      api.Queryreplace(data).then(res => {
        if (res.success) {
          Indicator.close();
          this.totalPage = res.data.totalPage;
          if (!!event) this.commentlist = "";
          this.commentlist = this.loadmore
            ? [...this.commentlist, ...res.data.list]
            : res.data.list; //res.data.list
          this.$util.getListUrl(this.commentlist);
          if (this.commentlist == '') {
            this.isreplaceempty = true
          } else {
            this.isreplaceempty = false
          }
          this.picAutoOrient(this.pageone - 1);
          if (res.data.currPage == res.data.totalPage) {
            this.hasmore = false;
          } else {
            this.hasmore = true;
          }
          this.is_r = false;
          setTimeout(() => {
            this.myscroll.refresh();
          }, 0);

          let placeObj = JSON.stringify({
            commentlist: this.commentlist,
            hasmore: this.hasmore,
            totalPage: this.totalPage,
            page: this.page,
            selected: this.selected,
            myid: this.myid,
            pageone: this.pageone,
            pagetwo: this.pagetwo,
            pagethree: this.pagethree
          });
          localStorage.placeStorage = placeObj;
        }
      });
    },
    reptwo (event) {
      Indicator.open("加载中...");
      if (!!event) {
        this.is_r = false;
        this.loadmore = false;
        this.pagetwo = 1;
        if (this.myscroll) this.myscroll.scrollToPage(0, 0, 100);
      }
      this.myid = "2";
      const data = {
        page: this.pagetwo,
        limit: 10,
        order: "desc",
        city: localStorage.getItem("city"),
        showType: 2
      };

      api.Queryreplace(data).then(res => {
        if (res.success) {
          Indicator.close();
          this.totalPage = res.data.totalPage;
          if (!!event) this.commentlist = "";
          this.commentlist = this.loadmore
            ? [...this.commentlist, ...res.data.list]
            : res.data.list;
          this.$util.getListUrl(this.commentlist);
          this.picAutoOrient(this.pagetwo - 1);
          if (res.data.currPage == res.data.totalPage) {
            this.hasmore = false;
          } else {
            this.hasmore = true;
          }
          if (this.commentlist == '') {
            this.isreplaceempty = true
          } else {
            this.isreplaceempty = false
          };
          this.is_r = false;
          setTimeout(() => {
            this.myscroll.refresh();
          }, 0);

          let placeObj = JSON.stringify({
            commentlist: this.commentlist,
            hasmore: this.hasmore,
            totalPage: this.totalPage,
            page: this.page,
            selected: this.selected,
            myid: this.myid,
            pageone: this.pageone,
            pagetwo: this.pagetwo,
            pagethree: this.pagethree
          });
          localStorage.placeStorage = placeObj;
        }
      });
    },
    repthree (event) {
      Indicator.open("加载中...");
      if (!!event) {
        this.is_r = false;
        this.loadmore = false;
        this.pagethree = 1;
        if (this.myscroll) this.myscroll.scrollToPage(0, 0, 100);
      }
      this.myid = "3";
      const data = {
        page: this.pagethree,
        limit: 10,
        order: "desc",
        showType: 3
      };
      api.Queryreplace(data).then(res => {
        if (res.success) {
          this.totalPage = res.data.totalPage;
          Indicator.close();
          if (!!event) this.commentlist = "";
          this.commentlist = this.loadmore
            ? [...this.commentlist, ...res.data.list]
            : res.data.list;
          this.$util.getListUrl(this.commentlist);
          this.picAutoOrient(this.pagethree - 1);
          if (this.commentlist == '') {
            this.isreplaceempty = true
          } else {
            this.isreplaceempty = false
          };
          if (res.data.currPage == res.data.totalPage) {
            this.hasmore = false;
          } else {
            this.hasmore = true;
          }
          this.is_r = false;
          setTimeout(() => {
            this.myscroll.refresh();
          }, 0);

          let placeObj = JSON.stringify({
            commentlist: this.commentlist,
            hasmore: this.hasmore,
            totalPage: this.totalPage,
            page: this.page,
            selected: this.selected,
            myid: this.myid,
            pageone: this.pageone,
            pagetwo: this.pagetwo,
            pagethree: this.pagethree
          });
          localStorage.placeStorage = placeObj;
        }
      });
    },
    isdisplacethumbup (data) {
      const params = {
        replacedId: this.commentlist[data.commentindex].replacedId,
        createReplacedUserId: this.commentlist[data.commentindex].userId
      };
      if (this.commentlist[data.commentindex].isgood == 0) {
        api.Queryreplacethumbup(params).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({ actType: 11, typeValue: this.commentlist[data.commentindex].replacedId });//用户轨迹
            this.commentlist[data.commentindex].isgood = 1;
            this.commentlist[data.commentindex].likes = res.data;
            //更新点赞缓存数据
            let placeObj = JSON.stringify({
              commentlist: this.commentlist,
              hasmore: this.hasmore,
              totalPage: this.totalPage,
              page: this.page,
              selected: this.selected,
              myid: this.myid,
              pageone: this.pageone,
              pagetwo: this.pagetwo,
              pagethree: this.pagethree
            });
            localStorage.placeStorage = placeObj;
          }
        });
      } else if (this.commentlist[data.commentindex].isgood == 1) {
        api.Querycanclereplacethumbup(params).then(res => {
          if (res.success) {
            this.commentlist[data.commentindex].isgood = 0;
            this.commentlist[data.commentindex].likes = res.data;
            //更新点赞缓存数据
            let placeObj = JSON.stringify({
              commentlist: this.commentlist,
              hasmore: this.hasmore,
              totalPage: this.totalPage,
              page: this.page,
              selected: this.selected,
              myid: this.myid,
              pageone: this.pageone,
              pagetwo: this.pagetwo,
              pagethree: this.pagethree
            });
            localStorage.placeStorage = placeObj;
          }
        });
      }
    },
    addreplace (data) {
      this.$router.push({ path: "/publishreplace", query: { tag: 0 } });
    },
    torepcomdet (data) {
      localStorage.turnCount = "detail2place";
      this.getTransformState();
      this.$router.push({
        path: "/replacedetail",
        query: {
          replacedId: this.commentlist[data.commentindex].replacedId,
          replacedResult: this.commentlist[data.commentindex].replacedResult,
          replaceIndex: data.commentindex
        }
      });
    },
    //获取跳转前的位置
    getTransformState () {
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if (loadmore.length > 0) {
        localStorage.turnBackplace = loadmore[0].style.transform;
      }
    },
    //图片自动旋转参数
    picAutoOrient (data) {
      for (var m = 10 * data; m < this.commentlist.length; m++) {
        for (var n = 0; n < this.commentlist[m].picture.length; n++) {
          this.commentlist[m].picture[n].src =
            this.commentlist[m].picture[n].src + "?imageMogr2/auto-orient";
        }
      }
    },
    replacedruledetail () {//查询说说版规
      let p = new Promise((resolve, reject) => {
        api.replacedruledetail().then(res => {
          if (res.success) {
            this.ruleConfig = res.config;
            if (res.config) {
              this.isRuleShow = true
            } else {
              this.isRuleShow = false
            }
          }
          resolve("获取说说版规...");
        })
      })
      return p;
    }
  },
  destroyed () {
    if (!!this.myscroll) this.myscroll.destroy();
  }
};
</script>
<style lang="less">
.replace-mtnav {
  border-bottom: 1px solid #e6e6e6;
  padding: 0 0.79rem;
  justify-content: space-between;
  height: 0.9rem;
  .mint-tab-item {
    width: 1.2rem;
  }
  .mint-tab-item {
    color: #494949;
    padding: 12px 0;
    flex: inherit;
  }
  .mint-tab-item.is-selected {
    width: 1.2rem;
    color: #fb685b;
    border-bottom: 0.02rem solid #fb685b;
  }
  .mint-tab-item-label {
    line-height: 0.4rem;
    font-size: 0.3rem;
    font-family: 'PingFangSC Regular';
  }
  .mint-tab-item.is-selected {
    margin-bottom: 0;
  }
}

.navbar-sep {
  background-color: #e6e6e6;
  width: 1px;
  height: 0.5rem;
  position: fixed;
  left: 2.5rem;
  top: 1.08rem;
  z-index: 2;
}

.navbar-septwo {
  background-color: #e6e6e6;
  width: 1px;
  height: 0.5rem;
  position: fixed;
  left: 5rem;
  top: 1.08rem;
  z-index: 2;
}

.shuoshuo-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 11.56rem;
  padding: 0 1rem;
}

.nosvg {
  font-size: 1.66rem;
  margin-top: 3.1rem;
  color: #999999;
}

.no-text {
  font-size: 0.3rem;
  color: #999999;
  font-family: 'PingFangSC Regular';
  text-align: center;
  margin-top: 0.4rem;
}
</style>
<style scoped>
.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
}

.loadmore-ul {
  padding-bottom: 1.2rem;
  list-style: none;
  min-height: 95vh;
}
</style>
